<template>
  <div class="container-a">
    <group>
      <cell v-for="i in list"
            :title="i.label"
            is-link
            :key="i.icon"
            @click.native="goPage(i)">
        <i class="iconfont i-f" :class="i.icon" slot="icon"></i>
      </cell>
    </group>
    <group>
      <cell v-for="i in countList" :title="i.label" is-link :key="i.icon">
        <i class="iconfont i-f" :class="i.icon" slot="icon"></i>
      </cell>
    </group>
  </div>
</template>

<script>
  import {Cell, Group} from 'vux'
  import {mapActions} from "vuex"
  export default {
    data () {
      return {
        list: [
          {
            label: "收件箱",
            icon: "icon-shoujianxiang",
            flag: 1,
            link: "inbox"
          },
          {
            label: "发件箱",
            icon: "icon-fajianxiang1",
            flag: 2,
            link: "inbox"
          },
          {
            label: "草稿箱",
            icon: "icon-caogaoxiang",
            flag: 3,
            link: "inbox"
          },
        ],
        countList: [
          {
            label: "未发统计",
            icon: "icon-tongji"
          },
          {
            label: "收发关系设定",
            icon: "icon-guanxitu"
          }
        ]
      }
    },
    methods: {
      ...mapActions([
        "_title"
      ]),
      goPage(v){
        this.$router.push({name: v.link, params: {flag: v.flag}});
      }
    },
    activated(){
      this._title("设置选项");
    },
    components: {
      Group,
      Cell
    }
  }
</script>

<style scoped lang="scss">
  @import "../css/animate";

  .i-f {
    color: #1694ff;
    font-size: 22px;
    margin: 0 8px 0 10px;
  }

</style>
